<template>
  <div class="suggest__item">
    <div class="suggest__item--dsc">
      <div class="suggest__item--name">{{suggestItem.name}}</div>
      <div class="suggest__item--singer">{{itemDsc}}</div>
    </div>
    <div class="suggest__item--icon">
      <i class="iconfont icon-wodetubiao-253"></i>
    </div>
  </div>
</template>
<script setup>
import { computed, defineProps } from "vue";
const props = defineProps({
  suggestItem:Object
})
const itemDsc = computed(()=>{
  let artists = props.suggestItem.artists
  const singers = []
  for(let i = 0; i <artists.length;i++){
    singers.push(artists[i].name)
  }
  
  return `${singers.join('/')}-${props.suggestItem.album.name}`
})

</script>
<style lang="stylus" scoped>
.suggest__item
  display flex
  .suggest__item--dsc
    flex 1
    .suggest__item--name
      color #2d96e0
      height 50%
      line-height 22px
      font-size 16px
      width 180px
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
    .suggest__item--singer
      height 50%
      color #767676
      font-size 12px
      line-height 22px
      width 200px
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
  .suggest__item--icon
    width 44px
    height 44px
    line-height 44px
    text-align right
    .icon-wodetubiao-253
      font-size 24px
      color #ccc
</style>